<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Jxm">
        <title>钢琴</title>
        <style>
         html,body{
             height: 100%;
         } 
         body{
             /*设置背景径向渐变*/
             background-image: radial-gradient(#666,#000);
             display: flex;
             justify-content: center;
             align-items: center;
             overflow: hidden;
         }  
         main{
             width: 800px;
             height: 400px;
             border: 18px solid #333;
             border-top-width: 40px;
             border-bottom-width: 13px;
             border-radius: 15px;
             box-shadow: 0 0 20px #999;
             background-image: url(img/keys.png);
             background-size: 100% 100%;
             display: flex;
         }
         div{
             height: 100%;
             flex-grow: 1;
         }
         /*div:nth-child(2n+1){
             background-color: red;
         }
         div:nth-child(2n){
             background-color: blue;
         }*/
         div:active{
             background-image: linear-gradient(rgba(255,255,255,0),rgba(130,130,130,0.5));
         }
         .down{
             background-image: linear-gradient(rgba(255,255,255,0),rgba(130,130,130,0.5));             
         }
        </style>
    </head>
    <body>
        <main>
            <div onmousedown="play(0)"></div>
            <div onmousedown="play(1)"></div>
            <div onmousedown="play(2)"></div>
            <div onmousedown="play(3)"></div>
            <div onmousedown="play(4)"></div>
            <div onmousedown="play(5)"></div>
            <div onmousedown="play(6)"></div>
            <div onmousedown="play(7)"></div>
            <div onmousedown="play(8)"></div>
        </main>
        <audio src="notes/1.oga"></audio>
        <audio src="notes/2.oga"></audio>
        <audio src="notes/3.oga"></audio>
        <audio src="notes/4.oga"></audio>
        <audio src="notes/5.oga"></audio>
        <audio src="notes/6.oga"></audio>
        <audio src="notes/7.oga"></audio>
        <audio src="notes/8.oga"></audio>
        <audio src="notes/9.oga"></audio>
    </body>
</html>

<script>
    var divs=document.querySelectorAll('div');
    var players=document.querySelectorAll('audio');

    function play(index){
        // 根据传递的索引值，找到对应的audio标签 然后开始播放声音
        var player=players[index];
        // 重新加载音频资源
        player.load();
        // 播放
        player.play();
    }

    // 按键播放
    window.onkeydown=function(ev){
        // 判断当前code的值不等于ev.keycode的值的时候，进入判断语句，让code的值等于ev.keycode的值，以防出现按下
        // 某个按键不松开出现声音断续的效果
        if(code != ev.keyCode){
            code=ev.keyCode;
            // 判断按键数字是49-57的时候，进入判断语句
            if(code>=49 && code<=57){
                var index=code-49;
                // 根据按键数字播放声音
                play(index);
                // 找到对应的div添加down类名
                divs[index].className='down';
            }
        }
    }
    window.onkeyup=function(){
        code=0;

        // 松开按键时，清空div的类名，以防下次按键不会出现渐变背景
        for(var i=0;i<divs.length;i++){
            divs[i].className='';
        }
    }
</script>